<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>木马牛<?php echo date('Y'); ?></title>     
        <link rel="stylesheet" href="__PUBLIC__/libs/layui/2.4.6/css/layui.css">
        <script type="text/javascript" src="__PUBLIC__/libs/layui/2.4.6/layui.js"></script>
        <style>
            .carousel_div1{
                background: url(http://showapi.mmno.com/api.php/showapi.bing/img_1366) no-repeat fixed center center;
                background-size: cover;
            }
            .layer_notice {
                background: #5fb878 none repeat scroll 0 0;
                float: left;
                height: 75px;
                overflow: hidden;
                padding: 10px;
                width: 330px;
            }
            .layer_notice ul li {
                color: #fff;
            }
            .video-player {
                background-color: transparent;
                min-width: 100%;
                min-height: 100%;
                display: block;
                position: absolute;
                z-index: 1;
                top: 0;
            }
            .video_mask {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(0, 0, 0, 0.3);

            }
            .login {
                width: 360px;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 4px;
                cursor:move;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -150px;  /* 设置margin-left / margin-top 为自身高度的一半 */
                margin-left: -180px;
            }

            .login .login_content{
                margin: 30px;
            }

            .login h1 {
                text-align: center;
                color: #fff;
                font-size: 24px;
                margin-bottom: 20px;
            }
            .form_code {
                position: relative;
            }
            .form_code .code {
                position: absolute;
                right: 0;
                top: 1px;
                cursor: pointer;
            }
            .login_btn {
                width: 100%;
            }

            @media (max-width: 991px) {
                .login{
                    background: none;
                } 
            }
        </style>
    </head>
    <body>
        <div class="layui-carousel video_mask" id="login_carousel" >

            <div carousel-item>
                <div class="carousel_div1"></div>
            </div>
            <div id="login" class="login layui-anim layui-anim-up" draggable="true">

                <div class="login_content">

                    <h1>MuJiShop 2020</h1> 
                    <form class="layui-form form-box" method="post">
                        <div class="layui-form-item">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off"  value="" class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" value="" class="layui-input">
                        </div>
                        <!--                        <div class="layui-form-item form_code">
                                                    <input class="layui-input" name="code" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
                                                    <div class="code">
                                                        <img src="" width="116" height="36">
                                                    </div>
                                                </div>-->
                        <button class="layui-btn login_btn layui-btn-normal" lay-submit="" lay-filter="login">登陆系统</button>
                        <div class="layui-form-item">
                            <div style="color: white; padding-top: 15px;">建议使用1920*1080分辨率以达到最佳浏览效果</div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </body>
</html>
<script>
    layui.config({
        base: "__PUBLIC__/admin/js/"
    }).use(['form', 'layer', 'jquery', 'carousel'], function () {
        var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                carousel = layui.carousel;
        /**背景图片轮播*/
        carousel.render({
            elem: '#login_carousel',
            width: '100%',
            height: '100%',
            interval: 2000,
            arrow: 'none',
            anim: 'fade',
            indicator: 'none'
        });
        /**重新生成验证码*/
        function reqCaptcha() {
            var url = "?nocache=" + new Date().getTime()
            $('.code img').attr("src", url)
        }
        /**点击验证码重新生成*/
        $('.code img').on('click', function () {
            reqCaptcha();
        });
        /**监听登陆提交*/
        form.on('submit(login)', function (e) {
            //弹出loading
            var loginLoading = layer.msg('登陆中，请稍候', {icon: 16, time: false, shade: 0.8});
            //登陆验证
            $.ajax({
                url: '<?php echo url('everyone/login'); ?>',
                type: 'post',
                async: false,
                data: e.field,
                success: function (data) {
                    //登陆成功
                    if (data.code == 1) {
                        layer.close(loginLoading);
                        layer.msg(data.msg)
                        reqCaptcha();
                        return false;
                    } else {
                        window.location.href = "<?php echo url('index/index'); ?>";
                        layer.close(loginLoading);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg(errorThrown, {icon: 2});
                }
            });
            return false;
        });


        $(function () {
            //移动窗口的步骤
            //1、按下鼠标左键
            //2、移动鼠标
            $('#login').mousedown(function (e) {
                // e.pageX
                var positionDiv = $(this).offset();
                var distenceX = e.pageX - positionDiv.left;
                var distenceY = e.pageY - positionDiv.top;
                //alert(distenceX)
                // alert(positionDiv.left);
                $(document).mousemove(function (e) {
                    var x = e.pageX - distenceX;
                    var y = e.pageY - distenceY;
                    if (x < 0) {
                        x = 0;
                    } else if (x > $(document).width() - $('#login').outerWidth(true)) {
                        x = $(document).width() - $('#login').outerWidth(true);
                    }
                    if (y < 0) {
                        y = 0;
                    } else if (y > $(document).height() - $('#login').outerHeight(true)) {
                        y = $(document).height() - $('#login').outerHeight(true);
                    }

                    x = x + 180;
                    y = y + 150;

                    $('#login').css({
                        'left': x + 'px',
                        'top': y + 'px'
                    });
                });
                $(document).mouseup(function () {
                    $(document).off('mousemove');
                });
            });
        });


    });
</script>